<template>
  <div class="nav-header">
      <nav class="wrapper">
        <div class="logo fl">
          <img src="../../assets/logo.png" alt="小兔仙儿">
        </div>
        <div class="nav fl">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">生鲜</a></li>
            <li><a href="#">美食</a></li>
            <li><a href="#">餐厨</a></li>
            <li><a href="#">电器</a></li>
            <li><a href="#">居家</a></li>
            <li><a href="#">洗护</a></li>
            <li><a href="#">孕婴</a></li>
            <li><a href="#">服装</a></li>
          </ul>
        </div>
        <div class="search fl">
          <input type="text" placeholder="搜一搜">
        </div>
        <div class="cart fl">
          购
        </div>
      </nav>

  </div>
</template>

<script>
export default {
  name: "NavHeader"
}
</script>

<style lang="less" scoped>
.nav-header {
  nav{
    margin: 30px auto;
    height: 70px;

    .logo{
      width: 207px;
      height: 70px;
      img{
        width: 100%;
      }
    }
    .nav{
      height: 70px;
      margin-left: 40px;

      ul{
        li{
          float: left;
          line-height: 70px;
          margin-right: 48px;
          a{
            padding-bottom: 7px;
            &:hover{
              color: #27ba9b;
              border-bottom: 1px solid #27ba9b;
            }
          }
        }
      }
    }
    .search{
      width: 172px;
      height: 30px;
      margin: 24px 15px 16px 34px;
      border-bottom: 2px solid #e7e7e7;

      input{
        font-size: 14px;
        width: 100%;
        height: 28px;
        border: none;
        outline: none;
        padding-left: 18px;
        &::placeholder{
          font-size: 14px;
          color: #cccccc;
        }
      }
    }
    .cart{
      margin-top: 28px;
      margin-bottom: 19px;
      width: 23px;
      height: 23px;
      background-color: #27ba9b;
      line-height: 23px;
      text-align: center;
      color: #dcdcdc;
      border-radius: 2px;
    }
  }
}
</style>